<template>
  <div>
    <el-calendar v-model="value" class="calendar">
      <template #dateCell="{data}">
        <p :class="data.isSelected ? 'is-selected' : ''" @click="getDay(data)">
          {{
            data.day
              .split("-")
              .slice(1)
              .join("-")
          }}
          <br />
          <span v-if="showtasknum">{{ getFirstTask(data) }}</span>
        </p>
      </template>
    </el-calendar>
    <el-drawer
      :title="drawertitle"
      :visible.sync="drawer"
      :direction="direction"
      size="70%"
      @open="drawerOpen"
      @close="dclose"
    >
      <todo ref="todo" :dateshow="false" :selected-day="selectedDay"></todo>
    </el-drawer>
  </div>
</template>

<script>
import DB from "../utils/db";
import { ipcRenderer } from "electron";
import Todo from "./Todo";

export default {
  name: "MyCalendar",
  components: { Todo },
  data() {
    return {
      value: new Date(),
      tasks: [],
      selectedDay: null,
      drawer: false,
      direction: "rtl",
      showtasknum: false
    };
  },
  methods: {
    dclose(){
      this.showtasknum = false
      this.showtasknum = true;
    },
    getDay(data) {
      this.drawer = true;
      this.selectedDay = data.day;
      console.log("切换到", data.day);
    },
    getFirstTask(data) {
      let arr = DB.getcurDayTask(data.day);
      return arr.length == 0 ? "✔️" : arr.length;
    },
    drawerOpen() {}
  },
  beforeCreate() {
    var _that = this;
    ipcRenderer.invoke("getDataPath").then(storePath => {
      DB.initDB(storePath);
      _that.showtasknum = true;
    });
  },
  computed: {
    drawertitle() {
      return this.selectedDay + "待办事项";
    }
  }
};
</script>

<style lang="scss">
* {
  color: white;
  background: transparent;
  background-color: unset;
}
th {
  color: white;
}
.el-calendar__title {
  color: white;
}
.el-button {
  background: transparent;
}
.el-button:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.el-calendar-table:not(.is-range) td.next,
.el-calendar-table:not(.is-range) td.prev {
  color: blueviolet;
}
.is-selected {
  color: #1989fa;
}
.el-calendar-table td.is-selected {
  background-color: rgba(255, 255, 255, 0.5);
}
.el-calendar-table .el-calendar-day:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.calendar {
  width: 100%;
}

.el-calendar {
  background-color: transparent;
}

//弹出窗口标题
#el-drawer__title {
  * {
    color: black;
  }
  span {
    color: black !important;
  }
}
//弹出窗口
.rtl {
  height: 50% !important;
  margin-top: 25%;
  border-radius: 15px;
  background-color: blanchedalmond;
}
.el-drawer__body {
  .root {
    background-color: rgba(255, 255, 255, 0.3);
  }
}

//日期格
.el-calendar-day {
  height: unset !important;
  text-align: center;
}
.el-button:focus{
  background-color: transparent !important;
}
//星期标题颜色
th{
  color: unset !important;
}


</style>
